<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>系统菜单</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!-- 公共样式 开始 -->
		<link rel="stylesheet" type="text/css" href="css/base.css">
		<link rel="stylesheet" type="text/css" href="css/iconfont.css">
		<script type="text/javascript" src="framework/jquery-1.11.3.min.js"></script>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>
		<!-- 滚动条插件 -->
		<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css">
		<script src="framework/jquery-ui-1.10.4.min.js"></script>
		<script src="framework/jquery.mousewheel.min.js"></script>
		<script src="framework/jquery.mCustomScrollbar.min.js"></script>
		<script src="framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
	<!-- 公共样式 结束 -->
		
  </head>
  
  <body><div class="backRoleSysModel-con">
			<div class="layui-form-item">
				<form class="layui-form" action="">
				  <div class="layui-form-item" >
				   <br>
					    <div class="layui-input-inline">
							<input style="width:200px;" placeholder="请输入菜单名称" type="text" id="SystemModelselecet" name="SystemModelselecet"class="layui-input">
						</div>
						<div class="layui-inline">
							<button id="selecet" type="button"class="layui-btn layuiadmin-btn-useradmin layui-btn-radius">查询</button>
						</div>
						<div class="layui-inline">
							<button type="button" class="layui-btn layui-bg-blue" id="addSystemModel" lay-event="addSystemModel" lay-filter="addSystemModel" style="margin-left: 10px;">添加一级菜单</button>
						</div>
				  </div>
				 </form>
			 </div>
		<table class="layui-hide" id="systemModel" lay-filter="systemModel"></table>
		<script type="text/html" id="barDemo"> 
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
			<a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
			<a class="layui-btn layui-btn-xs" id="system" lay-event="system">编辑二级菜单</a>
       	</script>
		<script type="text/html" id="selectbar">
				<input type="checkbox" name="{{d.deepth}}" value="{{d.id}}" title="授予" lay-filter="lockDemo" {{ d.isedit == "1" ? 'checked' : '' }}>
		</script>
		<script type="text/html" id="menuTypebar">
				<span>{{ d.deepth <= "1" ? '展开菜单' : '子菜单' }}</span>
		</script>
				
		<!--添加  -->
		<div id="add-systemModel" style="display: none;text-align: center; ">
			<form class="layui-form" action="">
					<div class="layui-form-item">
						<label class="layui-form-label">菜单名称:</label>
						<div class="layui-input-block">
							<input type="text" name="name" id="name" lay-verify="name" autocomplete="off" placeholder="请输入菜单名称" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">展示名称:</label>
						<div class="layui-input-block">
							<input type="text" name="chinesename" id="chinesename" autocomplete="off" placeholder="请输入展示名称" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">展示图标:</label>
						<div class="layui-input-block">
							<input type="text" name="imageurl" id="imageurl" autocomplete="off" placeholder="请输入展示图标" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">跳转页面:</label>
						<div class="layui-input-block">
							<input type="text" name="navurl" id="navurl" autocomplete="off" placeholder="请输入跳转页面" class="layui-input">
						</div>
					</div>
					
					<div class="layui-form-item layui-hide">
				      <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
				      <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
				    </div>
				</form>
			</div>
		</div>
	
	<script src="./js/jquery-3.3.1.js" charset="utf-8"></script>
	<script src="./layui/layui.js" charset="utf-8"></script>
	<script>
	layui.use([ 'table', 'form', 'layer', 'laydate', 'laytpl', 'element' ], function() {
		var table = layui.table, form = layui.form, 
			layer = layui.layer, $ = layui.jquery,
			laydate = layui.laydate, laytpl = layui.laytpl,
			element = layui.element;
	
		/*加载表格*/
		table.render({
			elem : '#systemModel',
			id:'systemModel',
			url : './systemmodel/getsystemmodellist',
			title : '后台管理员用户数据表',
			height: "full-130",
			skin : 'line',
			even : true,
			cols : [ 
			     [ 
			     {
					field : 'sysid',
					title : 'ID',
					hide: true ,
					width : 50,
				}, {
					field : 'sysname',
					align : 'center',
					title : '菜单名称',
					width : 230,
				}, {
					field : 'chinesename',
					align : 'center',
					title : '展示名称',
					width : 250,
				}, {
					field : 'imageurl',
					title : '展示图标',
					align : 'center',
					
				},{
					field : 'navurl',
					align : 'center',
					title : '跳转页面',
					width : 250,
				},{
					title : '操作',
					toolbar : '#barDemo',
					align : 'center',
					width : 300,
				} ] 
			 ],
			 page: {
					layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
					groups: 5,
					limit: 10,
					limits: [10, 20, 30, 40, 50],
					theme: '#1E9FFF',						
			 },
		});
		
		$("#selecet").click(function(){
   			var SystemModelselecet=$("#SystemModelselecet").val().trim();
   			var param = '?selecetdemand='+SystemModelselecet;
		table.render({
			elem : '#systemModel',
			id:'systemModel',
			url : './systemmodel/getallsystemmodel' + param,
			title : '后台管理员用户数据表',
			height: "full-130",
			skin : 'line',
			even : true,
			cols : [ 
			     [ 
			     {
					field : 'sysid',
					title : 'ID',
					hide: true ,
					width : 50,
				}, {
					field : 'sysname',
					align : 'center',
					title : '菜单名称',
					width : 230,
				}, {
					field : 'chinesename',
					align : 'center',
					title : '展示名称',
					width : 250,
				}, {
					field : 'imageurl',
					title : '展示图标',
					align : 'center',
					
				},{
					field : 'navurl',
					align : 'center',
					title : '跳转页面',
					width : 250,
				},{
					title : '操作',
					toolbar : '#barDemo',
					align : 'center',
					width : 300,
				} ] 
			 ],
			 page: {
					layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
					groups: 5,
					limit: 10,
					limits: [10, 20, 30, 40, 50],
					theme: '#1E9FFF',						
			 },
			});
		});
		 $("#addSystemModel").click(function(){
			//调用方法加载select管理员角色
			/* loadAdminRole("userRole",form);  */
			layer.open({
				type : 1,
				title : '一级菜单添加',
				area : [ '400px', '425px' ],
				shade : 0.4,
				content : $('#add-systemModel'),
				btn : [ '保存', '返回' ],
				yes : function() {
					//获取
					var name = $("#name").val().trim();
					var chinesename = $("#chinesename").val().trim();
					var imageurl = $("#imageurl").val().trim();	
					var navurl = $("#navurl").val().trim();
					if(name == "") {
						layer.tips('不能为空', '#name');
						return;
					} 
					if(chinesename==""){
						layer.tips('不能为空', '#chinesename');
						return;
					}
					if(imageurl==""){
						layer.tips('不能为空', '#imageurl');
						return;
					}
					if(navurl==""){
						layer.tips('不能为空', '#navurl');
						return;
					}
					
					//构建参数 
					var obj = {
						"name":name,
						"chinesename":chinesename,
						"imageurl":imageurl,
						"navurl":navurl,
						};
				
					//alert(param)
					//通过ajax传值，传到后台做数据交换
					$.ajax({
						url : "./systemmodel/addsystemmodel",
						type : "POST",
						data : obj, //直接传对象参数 
						dataType : 'json',
						success : function(data) {
							if(data.code == 0){
							layer.msg(data.msg,{icon:6}); 
						}else{
							layer.msg(data.msg,{icon:5});
						}
						
						setTimeout(function(){
								parent.layui.table.reload('LAY-app-content-list'); //重载表格
		     					parent.layer.close(index); //再执行关闭 
								parent.layui.table.reload('systemModel'); //重载表格
								table.reload('test'); //重载表格	
								},1*1000)
							},
							error:function(data){
								layer.msg(data.msg,{icon:5});
							}
						})
						},
					});	
					return false;
			});
		/*加载表格结束*/
		//table监听工具条
		table.on('tool(systemModel)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
		  var data = obj.data; //获得当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  var tr = obj.tr; //获得当前行 tr 的DOM对象
		  if(layEvent === 'delete'){ //删除
		    layer.confirm('真的删除行么', function(index){
		      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
		      layer.close(index);
		      //向服务端发送删除指令
		      	$.post("./systemmodel/deletesystemmodel",{sysid:obj.data.sysid},function(flag){
	    			if(flag){
	    				layer.msg("刪除成功",{icon:6}); //表格刷新
				        table.reload('test'); //重载表格	
	    			}else{
	    				layer.msg("刪除失敗",{icon:5});
	    			}
		    	});
		    });
		  } else if(layEvent === 'system'){ //编辑
		    //do something
		   //脚本编辑弹出层
	             var name = encodeURIComponent(data.toolName);
	             //alert(name);
	             layer.open({
		               type: 2,
		               title: '添加二级菜单信息',
		               shadeClose: true,
		               shade: 0.5,
		               closeBtn:'1',//右上角xx关闭
		               area: ['1000px','500px'],
		               content:'addSystemModelTwo.jsp',
		               yes: function(index, layero){
			           //点击确认触发 iframe 内容中的按钮提交
			           var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
			           submit.click();
			           //表格刷新
		          	   table.reload('systemModel');
			        },
		               success : function(layero, index){
				            var body = layui.layer.getChildFrame('body', index);
				            if(layEvent === 'system'){
				                // 取到弹出层里的元素，并把编辑的内容放进去
				                var oldid = obj.data.sysid;
								sessionStorage.setItem('sysid',oldid);
								console.log(oldid);
				                body.find("#oldid").val(obj.data.sysid);  //将选中的数据的id传到编辑页面的隐藏域，便于根据ID修改数据
				                // 记得重新渲染表单
		                		form.render();
				            }
				            setTimeout(function(){
				                layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
				                    tips: 3
				                });
				            },100)
				        }
		              
	             });
	              //同步更新缓存对应的值
		    obj.update({
		      username: '123'
		      ,title: 'xxx'
		    });
		  }
		  else if(layEvent === 'edit'){ //编辑
		    //do something
		   //脚本编辑弹出层
	             var name = encodeURIComponent(data.toolName);
	             //alert(name);
	             layer.open({
		               type: 2,
		               title: '修改管理员用户信息',
		               shadeClose: true,
		               shade: 0.5,
		               closeBtn:'1',//右上角xx关闭
		               area: ['400px','500px'],
		               content:'edit_SystemModel.jsp',
		               btn: ['确定', '取消'],
		               yes: function(index, layero){
			           //点击确认触发 iframe 内容中的按钮提交
			           var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
			           submit.click();
			           //表格刷新
		          	   table.reload('systemModel');
			        },
		               success : function(layero, index){
				            var body = layui.layer.getChildFrame('body', index);
				            if(layEvent === 'edit'){
				                // 取到弹出层里的元素，并把编辑的内容放进去
				                body.find("#sysid").val(obj.data.sysid);  //将选中的数据的id传到编辑页面的隐藏域，便于根据ID修改数据
				                body.find("#sysname").val(obj.data.sysname); 
				                body.find("#chinesename").val(obj.data.chinesename);
				                body.find("#imageurl").val(obj.data.imageurl);
				                body.find("#navurl").val(obj.data.navurl);
				                // 记得重新渲染表单
		                		form.render();
				            }
				            setTimeout(function(){
				                layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
				                    tips: 3
				                });
				            },100)
				        }
	             });
	              //同步更新缓存对应的值
		    obj.update({
		      username: '123'
		      ,title: 'xxx'
		    });
		  }
		});
	  });
	</script>
</body>
</html>
